<template>
  <div class="container">
    <navbar class="de-navbar" :vaniconL="true" :noRight="true" :noLeft="false" :vaniconR="true" iconNameL="arrow-left" iconNameR="flag-o" @clickLeft="$router.go(-1)" >
      发布需求
    </navbar>

    <div style="height: 0.45rem"></div>

    <van-form @submit="onSubmit">
      <van-field name="projectTypeid" label="类型" :rules="[{ required: true, message: '请选择类型' }]">
        <template #input>
          <van-radio-group v-model="form.projectTypeid" direction="horizontal">
            <van-radio :name="key" v-for="(value, key) in projectTypeList" :key="key">{{ value }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="uploader" label="文件上传">
        <template #input>
          <van-uploader :after-read="onRead" v-model="imageShowList" />
        </template>
      </van-field>
      <van-field
        v-model="form.title"
        name="title"
        autosize
        label="标题"
        placeholder="请输入标题"
        :rules="[{ required: true, message: '请输入标题' }]"
      />
      <van-field
        v-model="form.introduction"
        name="introduction"
        rows="4"
        autosize
        label="简介"
        type="textarea"
        placeholder="请输入简介"
        :rules="[{ required: true, message: '请输入简介' }]"
      />
      <van-field
        v-model="form.content"
        name="content"
        rows="4"
        autosize
        label="项目说明"
        type="textarea"
        placeholder="请输入项目说明"
        :rules="[{ required: true, message: '请输入项目说明' }]"
      />
      <van-field
        v-model="form.skilled"
        name="skilled"
        rows="4"
        autosize
        label="方案要求"
        type="textarea"
        placeholder="请输入方案要求"
        :rules="[{ required: true, message: '请输入方案要求' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
  
</template>

<script>
/**
 * @author leonard
 * @date 2021/01/18
 * @description 发布需求
 */
import { set_project } from '@/api/cooperation'
import navbar from "@/components/navbar"
import axios from 'axios'
import uuidv1 from 'uuid/v1'

export default {
  components: {
    navbar
  },
  data() {
    return {
      projectTypeList: {
        '1': '方案',
        '2': '项目',
        '3': '标注'
      },
      form: {
        imageList: []
      },
      imageShowList: []
    }
  },
  methods: {
    // 文件上传
    onRead(file) {
      file.status = 'uploading'
      file.message = '上传中...'
      const data = new FormData()
      data.append('projectid', uuidv1())
      data.append('file', file.file)
      axios({
        url: 'https://ds.pushiyixue.com/ds/project/upload_project',
        method: 'post',
        data,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        const { data } = res.data
        if (data.status === 200) {
          file.status = 'done'
          file.message = '上传成功'
          this.form.imageList.push(data.image)
          this.form.image = this.form.imageList.join('#')
        }
      })
    },
    // 提交
    onSubmit(values) {
      const { projectTypeid } = this.form
      const projectType = this.projectTypeList[projectTypeid]
      const { id: userId } = JSON.parse(sessionStorage.getItem("userInfo"))
      const projectId = uuidv1()
      const params = Object.assign({}, this.form, { projectType, projectId, userId })
      delete params.imageList
      set_project(params).then(res => {
        if (res.data.status === 200) {
          this.$toast.success('发布成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 500)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.success {
  color: #67C23A;
}
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  text-align: center;
  .de-navbar {
    width: 100%;
    height: 0.45rem;
    position: fixed;
    top: 0;
    z-index: 10;
    background: #4775d9;
    background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
    color: #fff;
  }
}
</style>